<template>
  <Drawer :title="title">
    <!-- 表单 -->
    <FosoForm
      ref="formRef"
      :form-columns="formColumns"
      :form-data="formData"
      :form-rules="formRules"
      label-position="top"
      label-width="100px"
    />
  </Drawer>
</template>
<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';

defineProps({
  // 表单数据
  title: {
    type: String,
    default: '',
  },
});

// 表单实例
const formRef = ref();
// 表单数据
const formData = ref({
  name: '',
  age: 18,
  gender: '',
  munetype: 'dir',
  gender2: '',
  checkedCities: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
  gender3: '',
  cascader: [],
  allselect: false,
  gender4: '',
  tree: [], // Tree 组件绑定的数据
});

// 表单配置项
const formColumns = ref([
  {
    label: '角色名称',
    prop: 'name',
    span: 24,
    xType: 'Input',
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '排序',
    prop: 'name',
    span: 24,
    xType: 'Input',
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '角色值',
    prop: 'name',
    xType: 'Input',
    span: 24,
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '默认路由',
    prop: 'name',
    xType: 'Input',
    span: 24,
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '菜单名称',
    prop: 'name',
    xType: 'Input',
    span: 24,
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '状态', // 表单项的标签
    prop: 'munetype', // 绑定到 formData.name
    xType: 'RadioGroup',
    componentProps: {
      options: [
        { label: '启用', value: 'dir' },
        { label: '停用', value: 'menu' },
      ],
    },
  },
  // 备注
  {
    label: '备注',
    prop: 'name',
    xType: 'Input',
    span: 24,
    componentProps: {
      type: 'textarea',
      placeholder: '请输入',
      clearable: true,
    },
  },
]);

// 校验规则
const formRules = ref({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
});

const [Drawer] = useVbenDrawer();
</script>
